<template >
  <div>

    <el-container>

      <el-container>
        <el-aside width="200px" align="left" >

  <el-menu :default-openeds="['1', '7']" @select="fullscreenLoading">

    <template>
        <el-menu-item index="7-1" >全部分类</el-menu-item>
        <el-menu-item index="7-3">本周最受欢迎推荐</el-menu-item>
        <el-menu-item index="7-4">新秀菜谱</el-menu-item>
        <el-menu-item index="7-7">月度最佳</el-menu-item>
    </template>

    <el-divider></el-divider>
    <el-submenu index="1">

      <template slot="title">菜式</template>
      <el-menu-item-group>
        <el-menu-item index="1-1">家常菜</el-menu-item>
        <el-menu-item index="1-3">下饭菜</el-menu-item>
        <el-menu-item index="1-4">素菜</el-menu-item>
        <el-menu-item index="1-6">下酒菜</el-menu-item>
        <el-menu-item index="1-7">小清新</el-menu-item>
        <el-menu-item index="1-8">创意菜</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="2">
      <template slot="title">特殊场合</template>
      <el-menu-item-group>
        <el-menu-item index="2-1">早餐</el-menu-item>
        <el-menu-item index="2-2">下午茶</el-menu-item>
        <el-menu-item index="2-3">便当</el-menu-item>
        <el-menu-item index="2-5">年夜饭</el-menu-item>
        <el-menu-item index="2-6">深夜食堂</el-menu-item>
        <el-menu-item index="2-7">中式早餐</el-menu-item>
        <el-menu-item index="2-8">情人节</el-menu-item>
        <el-menu-item index="2-8">宵夜</el-menu-item>
        <el-menu-item index="2-8">快手早餐</el-menu-item>
        <el-menu-item index="2-8">西式早餐</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="3">
      <template slot="title">特色食品</template>
      <el-menu-item-group>
        <el-menu-item index="3-8">广东小吃</el-menu-item>
        <el-menu-item index="3-8">日式小吃</el-menu-item>
        <el-menu-item index="3-8">北京小吃</el-menu-item>
        <el-menu-item index="3-8">川渝小吃</el-menu-item>
        <el-menu-item index="3-8">江南小吃</el-menu-item>
        <el-menu-item index="3-8">港式小吃</el-menu-item>
        <el-menu-item index="3-8">台湾小吃</el-menu-item>
        <el-menu-item index="3-8">陕西小吃</el-menu-item>
        <el-menu-item index="3-8">湖北小吃</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="4">
      <template slot="title">功效</template>
      <el-menu-item-group>
        <el-menu-item index="4-1">减肥</el-menu-item>
        <el-menu-item index="4-2">美容</el-menu-item>
        <el-menu-item index="4-1">润肺抗燥</el-menu-item>
        <el-menu-item index="4-1">补血</el-menu-item>
        <el-menu-item index="4-1">清热去火</el-menu-item>
      </el-menu-item-group>
      </el-submenu>
    <el-submenu index="5">
      <template slot="title">人群</template>
      <el-menu-item-group>
        <el-menu-item index="5-1">儿童</el-menu-item>
        <el-menu-item index="5-2">婴幼儿</el-menu-item>
        <el-menu-item index="5-1">老人</el-menu-item>
        <el-menu-item index="5-1">孕产妇</el-menu-item>
        <el-menu-item index="5-1">宝宝食谱</el-menu-item>
      </el-menu-item-group>
    </el-submenu>

  </el-menu>
</el-aside>


<!--  <el-main >-->
<!--    <el-main align="left" >-->
<!--      <h2>家常菜</h2>-->
<!--    </el-main>-->
<!--    <el-breadcrumb separator="/">-->
<!--      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>-->
<!--      <el-breadcrumb-item><a href="/">全部分类</a></el-breadcrumb-item>-->
<!--      <el-breadcrumb-item>活动列表</el-breadcrumb-item>-->

<!--    </el-breadcrumb>-->

<!--    <el-container>-->
<!--      <el-aside style="width: 50%" >-->
<!--        <template >-->

<!--      </template>-->
<!--      </el-aside >-->
<!--      <el-main style="width: 50%">-->
<!--        <template ><h3> 推荐菜谱</h3>-->



<!--        </template>-->
<!--      </el-main>-->
<!--    </el-container>-->
<!--  </el-main>-->
        <el-container>

          <el-header >
            <div>

              <!--<el-breadcrumb separator="/">-->
                <!---->

                <!--<div style="line-height: 100px" >-->
                <!--<el-breadcrumb-item :to="{path:'/heat'}" >做过最多</el-breadcrumb-item>-->
                  <!--<el-breadcrumb-item :to="{path:'/score'}" >评分最高</el-breadcrumb-item>-->
                <!--</div>-->
              <!--</el-breadcrumb>-->
            </div>

          </el-header>

          <el-main>
            <div>
            <el-row>



            <router-view >
            </router-view>
              <el-col :span="12"><div class="grid-content bg-purple-dark">

             <div class="demo-image__lazy" style="width: 50%;right: auto">
                <el-image v-for="url in urls" :key="url" :src="url" lazy></el-image>
              </div>
              </div>
            </el-col>


            </el-row>
            </div>
          </el-main>
        </el-container>
</el-container>
    </el-container>

  </div>
</template>
<style>


</style>

<script>

  export default {

    data() {
      return {
        showCalaner:true,
        urls: [
          'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
          'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
          'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
          'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
          'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
          'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
          'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
        ]
      }

    },
    methods: {

      fullscreenLoading(key, keyPath) {
        console.log(key, keyPath);
        if (key === "1-1") {
          this.showCalaner=false;

          this.$router.push("/jccList")
        }
        if(key==='7-3'){
          this.showCalaner=false;

          this.$router.push("/tuijian")

        }

      }
    }
  }




</script>
